<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <style>
        .container {
            color: #CBA;
            width: 200px;
            font-size: 45px,;
        }
    </style>
</head>

<body>
    <!-- 方式一 -->
    <div style="color: aqua; width: 100px; font-size: 15px;">方式一</div>
    <div id="root1"></div>
    <div id="root2"></div>

    <script type="text/babel">
        // 方式二
        // const style_2 = (
        //     <div style={{ color: '#ABC', width: '100px', fontSize: '30px' }}>方式二</div>
        // )
        const style_2 = React.createElement('div', {className: 'container'}, 'hello_world')
        // 方式三
        const style_3 = {
            color: '#CBA',
            width: '200px',
            fontSize: '45px',
        }
        const element = <div style={style_3}>方式三</div>
        ReactDOM.render(style_2, document.getElementById('root1'))
        ReactDOM.render(element, document.getElementById('root2'))
    </script>
</body>

</html>